<template>
  <div class="box-list-container">
    <div class="box-query-form">
      <el-form :model="queryParam" label-width="auto" label-position="right" :gutter="24">
        <el-row>
          <el-col :xl="6" :lg="6" :md="12" :sm="24">
            <el-form-item label="仓库名称:">
              <el-input v-model="queryParam.Tablename" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="24">
            <el-form-item label="1~18列任意内容:">
              <el-input v-model="queryParam.data" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col v-if="userInfo.userType === '666'" :xl="6" :lg="6" :md="12" :sm="24">
            <el-form-item label="所属会员:">
              <el-select v-model="queryParam.UserId" placeholder="请选择">
                <el-option v-for="item in memberUserList" :key="item.id" :label="item.loginNum" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <template v-if="toggleSearchStatus">
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="所属会员:">
                <el-select v-model="queryParam.selectData" placeholder="请选择">
                  <el-option v-for="item in memberUserList" :key="item.id" :label="item.loginNum" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </template> -->
          <el-col :xl="6" :lg="6" :md="12" :sm="24" class="table-search-btn">
            <el-button icon="el-icon-refresh" @click="searchReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="searchQuery">查询</el-button>
            <!-- <el-link style="margin-left: 10px;" type="primary" :underline="false" @click="handleToggleSearch">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
            </el-link> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="box-table">
      <div class="table-title">
        <div class="table-title-left" style="display: flex; align-items: center;">
          数据仓库列表
          <el-tooltip class="item" effect="light" content="存储大小：列1~6,100个字符或50个中文; 列7~12,1000个字符或500个中文; 列13~18,无上限;" placement="top">
            <i class="el-icon-info" />
          </el-tooltip>
        </div>
        <div>
          <el-button plain class="btnAdd" icon="el-icon-plus" @click="handleAdd('新增')">新增</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="editColName">修改列名</el-button>
          <el-button type="success" icon="el-icon-upload" @click="importExcelData">上传excel</el-button>
          <el-button type="success" icon="el-icon-download" :loading="exportExcelLoading" @click="exportExcelData">导出全部excel</el-button>
        </div>
      </div>
      <!-- 批量操作 -->
      <div v-if="selectedRowList.length" class="batchAction">
        <div class="batchAction-left">
          <el-dropdown>
            <el-button>
              更多菜单 <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="batchDelete"><i class="el-icon-delete" />删除</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="batchAction-right">
          已选择
          <span style="font-weight: 700">
            <el-link type="primary" :underline="false">{{ selectedRowList.length }}</el-link>
          </span>项
          <el-link type="primary" :underline="false" style="margin-left: 24px;" @click="onClearSelected">清空</el-link>
        </div>
      </div>
      <el-table ref="table" :data="dataSource" @selection-change="onSelectChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="expand" min-width="50">
          <template slot-scope="props">
            <div>
              <div v-for="(item,index) in colNameArr18" :key="index" class="expandList">
                <div class="expandLabel">{{ colNameArr18[index].label }}:</div>
                <div class="expandValue">{{ props.row['Table' + (index + 1)] }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="100" type="index" />
        <el-table-column v-if="userInfo.userType === '666'" label="所属用户" prop="UserNum" width="120" />
        <el-table-column label="仓库名" prop="Tablename" width="120" />
        <el-table-column v-for="(item,index) in colNameArrBit" :key="index" :prop="item.prop" :label="item.label" />
        <el-table-column label="创建时间" prop="createTime" width="170" />
        <el-table-column label="更新时间" prop="updateTime" width="170" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit('编辑', scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="handleDelete(scope.row.id)">
              <el-button slot="reference" type="text" style="color: red;">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <div slot="empty" class="emptyBg">
          <img src="@/assets/img/emptyData.png">
        </div>
      </el-table>
      <div class="box-paging">
        <pagination
          v-show="ipagination.total > 0"
          layout="total, sizes, prev, pager, next"
          :total="ipagination.total"
          :page.sync="ipagination.pageNum"
          :limit.sync="ipagination.pageSize"
          @pagination="loadData"
        />
      </div>
    </div>
    <updateModelCol ref="updateModelCol" @ok="getColName" />
    <updateModel ref="modalForm" @ok="modalFormOk" />
    <importExcelModel ref="importExcelModel" @ok="modalFormOk" />
  </div>
</template>

<script>
import { listMixin } from '@/mixins/listMixin'
import Pagination from '@/components/Pagination'
import updateModelCol from './components/updateModelCol'
import updateModel from './components/updateModel'
import importExcelModel from '@/components/xm/importExcelModel'
import { postAction } from '@/api/manage'
import { api_getMemberUser } from '@/api/user'
import { getColNameSortArr } from '@/utils/index'
import excel from 'lay-excel'
import { antiShake } from '@/utils'

export default {
  components: {
    Pagination,
    importExcelModel,
    updateModelCol,
    updateModel
  },
  mixins: [listMixin],
  data() {
    return {
      guidFieldName: 'id',
      toggleSearchStatus: false,
      colNameArrBit: [], // 部分列
      colNameArr18: [], // 18列
      colNameObj: {}, // 18列
      memberUserList: [],
      exportExcelLoading: false,
      userInfo: {},
      url: {
        list: 'DataWarehouse.aspx?action=GetList',
        delete: 'DataWarehouse.aspx?action=Delete',
        deleteBatch: 'DataWarehouse.aspx?action=DeleteBatch',
        colNameList: 'DataWarehouseColName.aspx?action=GetList'
      }
    }
  },
  created() {
    this.userInfo = this.$ls.get('USER_INFO')
    console.log('userInfo', this.userInfo)
    this.getMemberUser()
    this.getColName()
  },
  mounted() {
  },
  methods: {
    // 上传excel
    importExcelData() {
      this.$refs.importExcelModel.show({
        fileName: '数据仓库导入模板',
        importUrl: 'DataWarehouse.aspx?action=ImportExcel',
        importType: 'GeneralDatabase' // 标识
      })
    },
    // 生成excel
    createExcel(data) {
      if (data.length === 0) {
        return this.$message.info('无数据可导出')
      }
      // 过滤需要的列
      const filterColNameArr = ['Tablename']
      for (let i = 1; i <= 18; i++) {
        filterColNameArr.push(`Table${i}`)
      }
      filterColNameArr.push(`UserNum`)
      filterColNameArr.push(`createTime`)
      filterColNameArr.push(`updateTime`)
      data = excel.filterExportData(data, filterColNameArr)
      // 加列头
      const cn = this.colNameArr18
      data.unshift({
        Tablename: '仓库名',
        Table1: cn[0].label,
        Table2: cn[1].label,
        Table3: cn[2].label,
        Table4: cn[3].label,
        Table5: cn[4].label,
        Table6: cn[5].label,
        Table7: cn[6].label,
        Table8: cn[7].label,
        Table9: cn[8].label,
        Table10: cn[9].label,
        Table11: cn[10].label,
        Table12: cn[11].label,
        Table13: cn[12].label,
        Table14: cn[13].label,
        Table15: cn[14].label,
        Table16: cn[15].label,
        Table17: cn[16].label,
        Table18: cn[17].label,
        UserNum: '所属用户',
        createTime: '创建时间',
        updateTime: '更新时间'
      })
      // 执行导出函数，系统会弹出弹框
      excel.exportExcel(
        {
          sheet1: data
        },
        `导出数据仓库${this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xlsx`,
        'xlsx'
      )
      this.exportExcelLoading = false
      this.$message.success('导出成功')
    },
    // 导出数据
    exportExcelData() {
      antiShake(() => {
        this.$store.dispatch('app/setLoading', true)
        this.exportExcelLoading = true
        postAction(this.url.list, { pageNum: 1, pageSize: 1000000 }).then((res) => {
          console.log('导出excel数据', res)
          if (res.code === 1) {
            this.createExcel(res.data.list)
          }
        }).finally(() => {
          this.$store.dispatch('app/setLoading', false)
        })
      }, 600)
    },
    // 修改列名
    editColName() {
      this.$refs.updateModelCol.edit(this.colNameArr18)
      this.$refs.updateModelCol.title = '修改列名'
    },
    // 获取列名
    getColName() {
      postAction(this.url.colNameList, { UserNum: this.userInfo.loginNum, simple: 1 }).then((res) => {
        if (res.code === 1) {
          const { list, total } = res.data
          this.colNameObj = total ? { ...list[0] } : {}
          console.log('colNameObj', this.colNameObj)
          this.colNameArrBit = getColNameSortArr(this.colNameObj, 6)
          this.colNameArr18 = getColNameSortArr(this.colNameObj, 18)
          console.log('colNameArrBit', this.colNameArrBit)
          console.log('colNameArr18', this.colNameArr18)
        }
      })
    },
    // 获取会员
    getMemberUser() {
      api_getMemberUser().then((res) => {
        console.log('获取会员', res)
        if (res.code === 1) {
          this.memberUserList = res.data
        }
      })
    },
    // 展开收起
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__expanded-cell{
  padding-left: 20px;
}
::v-deep .el-icon-info{
  margin-left: 10px;
  font-size: 22px;
  color: #1890ff;
  cursor: pointer;
}
.expandList{
  display: flex;
  margin-bottom: 10px;
  .expandLabel{
    font-weight: 700;
    min-width: 200px;
    text-align: right;
    margin-right: 10px;
  }
  .expandValue{
    white-space: normal;
  }
}
</style>
